<template>
    <div class="content"  ref="menu">
        <ul class="menu-wrapper">
            <li class="menu-item" v-for="item in goods" >
                <span class="menu-title">
                    <span v-if="item.type >=0" :class="supportIconClass[item.type]" class="menu-icon"></span>
                    {{item.name}}</span>
            </li>
        </ul>
        <div class="foods-wrapper"  ref="food">
            <ul class="foods-container">
                <li class="foods-node" v-for="item in goods">
                    <h1 class="item-header">{{item.name}}</h1>
                    <ul class="item-body" >
                        <li class="foods-item" v-for="node in item.foods">
                            <img class="image" width="57" height="57" :src="node.image"/>
                            <div class="foods-right">
                                <span class="title">{{node.name}}</span>
                                <span class="description">{{node.description}}</span>
                                <span class="sell-count">月售{{node.sellCount}}份<span class="rating">好评率{{node.rating}}%</span></span>
                                <span class="price">¥{{node.price}} <span v-if="node.oldPrice" class="oldPrice">¥{{node.oldPrice}}</span></span>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--<Food v-if="this.selectedFood" :goods="selectedFood"></Food>-->
    </div>
</template>

<script type="text/ecmascript-6">
import Food from '../food/food.vue'
import BScroll from 'better-scroll'
export default {
  name: 'Goods',
  data () {
    return {
      goods: {},
      supportIconClass: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
      selectedFood: {}
    }
  },
  created: function () {
    this.$http.get('/api/goods').then((resp) => {
      this.goods = resp.body
      if (this.goods.code === 0) {
        this.goods = this.goods.data
      }
    })
    this._initScroll()
  },
  methods: {
    _initScroll: function () {
      this.$nextTick(() => {
        let foodScroll = new BScroll(this.$refs.menu, {})
        let menuScroll = new BScroll(this.$refs.food, {})
        foodScroll.on('scroll', (pos) => {
          console.log('x=' + pos.x + ',y=' + pos.y)
        })
        menuScroll.on('scroll', (pos) => {
          console.log('x=' + pos.x + ',y=' + pos.y)
        })
      })
    }
  },
  components: {Food, BScroll}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">

    @import "../../common/stylus/mixin.styl"
    .content
      display :flex
      position :absolute
      top:200px
      bottom :40px
      width :100%
      overflow :hidden
      .menu-wrapper
        flex :0 0 80px
        padding :0
        margin :0
        .menu-item
          display :flex
          align-items :center
          height :54px
          padding:0 12px 0 12px
          vertical-align :top
          background :#f3f5f7
        .menu-icon
          display :inline-block
          width :12px
          height :12px
          background-size :12px 12px
          background-repeat :no-repeat
          margin-right :2px
          &.decrease
            bg-image('decrease_3')
          &.discount
            bg-image('discount_3')
          &.guarantee
            bg-image('guarantee_3')
          &.invoice
            bg-image('invoice_3')
          &.special
            bg-image('special_3')
        .menu-title
          width :56px
          font-size :12px
          color :rgb(240,20,20)
          font-weight :200
          line-height :14px
          overflow :hidden
          overflow-wrap :break-word
      .foods-wrapper
        flex :auto
        .foods-container
          padding :0px
          margin-top :0px
          .foods-node
            list-style-type:none
            .item-header
              height :52px
              width :100%
              background :#f3f5f7
              font-size :12px
              color:rgb(147,153,159)
              padding-left :14px
              line-height :52px
              font-weight :600
              margin:0px

            .item-body
              list-style-type :none
              margin :0px
              padding: 18px
              .foods-item
                display :flex
                width :100%
                margin-bottom :18px
                .image
                  margin-right :10px
                .foods-right
                  display :flex
                  flex-direction :column
                  color:rgb(147,153,159)
                  font-size :10px
                  line-height :10px
                  .title
                    font-size :14px
                    color:rgb(7,17,27)
                    line-height :14px
                    margin-top :2px
                  .description
                    margin:8px 0 8px 0
                  .rating
                    display :inline-block
                    margin-left :12px
                    margin-bottom :10px
                  .price
                    display :inline-block
                    color:rgb(240,20,20)
                    font-size :16px
                    font-weight :700
                    line-height :16px
                    .oldPrice
                      display :inline-block
                      color:rgb(147,153,159)
                      margin-left :8px
                      font-size :10px
                      vertical-align :top
                      line-height :16px
                      text-decoration :line-through


</style>
